<template>
	<view class="bg-w pb30" style="min-height: 100vh;">
		<view class="integral-top">
			
			<view class="integral-header plr30">
				<view class="pt40 text-center ft36 text-w ftw600">2000</view>
				<view class="text-center opacity8 ft14 text-w mt20">当前可用积分</view>
				
				<view class="mt30 integral-notice plr30 flex alcenter text-w">
					<text class="iconfont icon_notice"></text>
					<text class="ft14 ml20">线下消费记得提醒商家赠送积分给你哟～</text>
				</view>
			</view>
			<view @click="showAlert = true" class="wh iconfont iconbtn_question ft24 text-w"></view>
		</view>
		
		<view class="integral-main plr30">
				<view class="bdr16 box-shadow bg-w pd30 flex alcenter">
					
					<view class="col3 text-center">
						<navigator url="/pages/member/integral/log">
						<view class="flex center">
							<app-icon :name="'icon_integral_detail'" type="iconfont" custom-class="integral-img" />
						</view>
						<view class="ft14 text-info mt20">积分明细</view>
						</navigator>
					</view>
					<view class="col3 text-center">
						<navigator url="/pages/member/integral/exchange">
						<view class="flex center">
							<image class="integral-img" :src="''"></image>
						</view>
						<view class="ft14 text-info mt20">兑换记录</view>
						</navigator>
					</view>
					<view class="col3 flex end">
						<navigator url="/pages/exchange/index">
						<view class="integral-exchange-btn flex center alcenter ft14 ftw600 text-w">兑换商品</view>
						</navigator>
					</view>
				</view>
				
				<view class="mt50 ft18 text-default ftw600">积分攻略</view>
				
				<view class="mt30 bg-default bdr16 pd30 flex alcenter space">
					<view class="flex alcenter">
						<image class="integral-icon" :src="''"></image>
						<view class="ml30">
							<view class="ft16 text-main ftw600">日常签到</view>
							<view class="ft14 text-theme mt20">+1～6积分不等</view>
						</view>
					</view>
					<view class="flex alcenter">
						<view class="btn-integral-go flex center alcenter">
							<image  :src="'icon_diamond'"></image>
							<text class="ft14 ftw600 text-w ml10">前往</text>
						</view>
					</view>
				</view>
				
				<view class="mt30 bg-default bdr16 pd30 flex alcenter space">
					<view class="flex alcenter">
						<image class="integral-icon" :src="''"></image>
						<view class="ml30">
							<view class="ft16 text-main ftw600">完善个人信息</view>
							<view class="ft14 text-theme mt20">+5积分</view>
						</view>
					</view>
					<view class="flex alcenter">
						<view class="btn-integral-yes flex center alcenter">
							<text class="iconfont icon_selected text-w ft24"></text>
						</view>
					</view>
				</view>
				
				
				<view class="mt30 bg-default bdr16 pd30 flex alcenter space">
					<view class="flex alcenter">
						<image class="integral-icon" :src="''"></image>
						<view class="ml30">
							<view class="ft16 text-main ftw600">推广商品赚积分(0/5)</view>
							<view class="ft14 text-theme mt20">+20积分</view>
						</view>
					</view>
					<view class="flex alcenter">
						<view class="btn-integral-go flex center alcenter">
							<image  :src="'icon_diamond'"></image>
							<text class="ft14 ftw600 text-w ml10">前往</text>
						</view>
					</view>
				</view>
				
				<view class="mt30 bg-default bdr16 pd30 flex alcenter space">
					<view class="flex alcenter">
						<image class="integral-icon" :src="''"></image>
						<view class="ml30">
							<view class="ft16 text-main ftw600">每日邀请好友注册(0/5)</view>
							<view class="ft14 text-theme mt20">+10积分</view>
						</view>
					</view>
					<view class="flex alcenter">
						<view class="btn-integral-go flex center alcenter">
							<image  :src="'icon_diamond'"></image>
							<text class="ft14 ftw600 text-w ml10">前往</text>
						</view>
					</view>
				</view>
				
				<view class="mt30 bg-default bdr16 pd30 flex alcenter space">
					<view class="flex alcenter">
						<image class="integral-icon" :src="''"></image>
						<view class="ml30">
							<view class="ft16 text-main ftw600">成为PLUS会员</view>
							<view class="ft14 text-theme mt20">+20积分且签到双倍积分</view>
						</view>
					</view>
					<view class="flex alcenter">
						<view class="btn-integral-go flex center alcenter">
							<image  :src="'icon_diamond'"></image>
							<text class="ft14 ftw600 text-w ml10">前往</text>
						</view>
					</view>
				</view>
				<view class="mt30 bg-default bdr16 pd30 flex alcenter space">
					<view class="flex alcenter">
						<image class="integral-icon" :src="''"></image>
						<view class="ml30">
							<view class="ft16 text-main ftw600">消费评价商家赠送</view>
							<view class="ft14 text-theme mt20">+5～20积分不等</view>
						</view>
					</view>
					<view class="flex alcenter">
						<view class="btn-integral-go flex center alcenter">
							<image  :src="'icon_diamond'"></image>
							<text class="ft14 ftw600 text-w ml10">前往</text>
						</view>
					</view>
				</view>
		</view>
		
		<unio2o-modal :show="showAlert" @closed="showAlert = false" title="积分说明">
			<view class="pd30" style="max-height: 1200rpx; overflow-y: scroll;">
				<view class="ft18 text-default">
					积分规则
				</view>
				<view class="mt30 ft14 text-info">
					积分是用户在进行签到等行为给予的回报，积分仅可在积分商城购买积分商品或券使用，不可兑现，不可转让
				</view>
				<view class="ft18 text-default mt30">
					使用方法
				</view>
				<view class="mt30 ft14 text-info">
					积分可用来兑换商城商品和券(需要平台开通积分商城)
				</view>
				<view class="ft18 text-default mt30">
					如何获得
				</view>
				<view class="mt30 ft14 text-info flex alcenter">
					 <text>日常签到：</text> <text class="text-default">每日签到可获得1-6不等积分奖励</text>
				</view>
				<view class="mt20 ft14 text-info flex alcenter">
					 <text>完善信息：</text> <text class="text-default">登录账号完善个人信息可得5积分奖励</text>
				</view>
				<view class="mt20 ft14 text-info flex alcenter">
					 <text>推广奖励：</text> <text class="text-default">每日分享5个商品可得10积分奖励</text>
				</view>
				<view class="mt20 ft14 text-info flex alcenter">
					 <text>邀请奖励：</text> <text class="text-default">每日邀请新用户注册可得10积分奖励</text>
				</view>
				<view class="mt20 ft14 text-info flex alcenter">
					 <text>成为会员：</text> <text class="text-default">成为PLUS会员可得20积分且签到双倍积分</text>
				</view>
				<view class="mt20 ft14 text-info flex alcenter">
					 <text>评价奖励：</text> <text class="text-default">购买消费评价商家可得5-20不等积分奖励</text>
				</view>
			</view>
		</unio2o-modal>
		
	</view>
</template>

<script>
	import  unio2oModal from '@/components/base/modal/modal.vue';
	export default{
		components:{
			unio2oModal
		},
		data(){
			return {
				showAlert:false
			}
		},
		methods:{
			
		}
	}
</script>

<style>
.btn-integral-yes{
	width:144rpx;
	height:64rpx;
	background:#CCCCCC;
	box-shadow:0rpx 12rpx 12rpx -4rpx rgba(204,204,204,0.2);
	border-radius:32rpx;
}	
.btn-integral-go image{
	width: 40rpx;
	height: 40rpx;
}
.btn-integral-go{
	width:144rpx;
	height:64rpx;
	background:linear-gradient(135deg,rgba(255,164,75,1) 0%,rgba(251,74,134,1) 100%);
	box-shadow:0rpx 12rpx 12rpx -4rpx rgba(252,114,107,0.2);
	border-radius:32rpx;
}
.integral-icon{
	width: 80rpx;
	height: 80rpx;
}	
.integral-img{
	width: 52rpx;
	height: 52rpx;
}
.integral-exchange-btn{
	width: 176rpx;
	height: 80rpx;
	background:linear-gradient(135deg,rgba(255,164,75,1) 0%,rgba(251,74,134,1) 100%);
	box-shadow:0rpx 12rpx 12rpx -4rpx rgba(252,114,107,0.2);
	border-radius: 40rpx;
}
.integral-main{
	position: relative;
	z-index: 10;
	margin-top: -80rpx;
}
.integral-notice{
	height: 72rpx;
	width: 100%;
	border-radius: 16rpx;
	background: rgba(0,0,0,.3);
}
.integral-top .wh{
	position: absolute;
	right: 30rpx;
	top: 40rpx;
	z-index: 3;
}
.integral-top{
	height: 400rpx;
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.integral-top::after{
	content: "";
	width:160%;
	height: 400rpx;
	position: absolute;
	left: -30%;
	top: 0;
	z-index: 1;
	border-radius: 0 0 50% 50%;
	background:linear-gradient(135deg,rgba(255,164,75,1) 0%,rgba(251,74,134,1) 100%);
	box-shadow:0rpx 12rpx 12rpx -4rpx rgba(252,114,107,0.2);
}
.integral-header{
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 2;
}
</style>